EyesiM's Blog

很久之前的面试 GG 总结之 HTML 篇

• 分类: HTML

标签（空格分隔）：

HTML 方面

1. 写 Doctype 的原因

DOCTYPE 声明不是 HTML 标签；它是指示 web 浏览器应该用哪个文档标准来解析页面。
一般在 sublime 里面用快捷键 !+Tab 出来的结果

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

这里面的 <!DOCTYPE html> 声明的文档标准也就是现在普遍使用的 HTML 版本 H5，而一开始 HTML 是基于 SGML，来进行编译的，通过指定 DTD，我们告诉浏览器使用哪一种 DTD 来对文档进行解析。在 HTML5 以前的 title 上，我们都需要指定某一个 DTD。
例如：

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

那么，指定特定的文档标准对浏览器解析页面时有什么作用呢？
其实指定不同的标准，表示支持不同的标签，说白了，DTD 就是制定你文档中的标签能够被浏览器识别。
DTD 源于 SGML，但是现在的 HTML5 并不依赖于 SGML 了，也就是说你可以已定义一些tag, 而不需要对内部进行更改了。
例如:

1
<test>ssss</test>

现在基本上，各大浏览器都很好地支持 H5，可以很放心地使用。

2. H5 不常用的属性

由于本人在使用 H5 上的经验并不是很多，只能根据书本还有自身的一点点的经验来谈，欢迎大家纠正。

  • lang 与 dir 属性
    lang 属性一般会在 HTML 元素上设置或者无需设置，因为一般来说，网页的文件不会提供给不同语言国家的用户。假若你的网站需要国际化，那么 lang 属性就很有用了。
    dir 也是与语言国家有关的属性，它用于设置文字的方向，有些国家的文字是从左到右排序（ltr）的但有些国家的文字是按照从右到左的方向排序（rtl）的，例如阿拉伯国家，此时它需要把 dir 设置为 rtl。
    但这两种属性对于大部分的网页来说还是很少会用到的。
  • contenEditable 属性
  • contextmenu 属性
  • spellcheck 属性
    spellcheck 属性很特别，浏览器可以用来检测可编辑区域的拼写语法错误，是个布尔值，在 PC 端浏览器支持比较好，但在移动端上面就比较吃力了。

3. 语义化

HTML 的语义通常来源于元素和属性这两个部分，除此以外文档结构也能表达一定的语义。

  • 元素名称
    通常元素名称就已经包含了丰富的语义信息
    eg: p(paragraph)，h(heading)，ul(Unordered lists),ol(ordered lists),li(list items)
    HTML本身赋予了这些标签的具体语义，而用户代理会根据这些语义，选择合适的 呈现方式。标签的语义丰富以至于大部分浏览器都为这些具体的标签加上了默认的样式（或者标准文档建议 UA 实现的样式）。
    元素语义化，有利于 SEO ，搜索引擎是无法识别 span 与 div 的，因此语义化标签能使爬虫抓取更多的有效信息。
    在 HTML 5 里面，帮助 HTML 更好地实现结构化和语义化可以说是 HTML 5 的首要和核心的增强。具体来说就是提供了一组丰富的语义化的标签，包括 header 和 footer 等。
  • 元素属性
    除了标签本身提供的丰富语义，配合适当的属性能够更精准地对元素和元素的内容进行描述。
    例如 class ，class 属性在实际应用中可以视为一种扩展的语义，W3C 的标准文档中也鼓励在使用 class 时将其设为描述内容特性的值。
  • 文档结构等
    除了独立的元素及其属性外，文档的整体结构以及文档的内容也其实也包含潜在的语义。
    例如，嵌套的 section 表示了不同级别的区块等等。

4.浏览器的内核

在过去，JS 还没充分地利用起来的时候，浏览器的内核包含了 JS 引擎 和渲染引擎，而现在浏览器内核只包含了渲染引擎，JS 引擎已经独立出来了（例如 V8）。所以现在我们所说的浏览器引擎一般是指渲染引擎。
现在比较的流行的引擎有：
| 内核 | 浏览器 |
| :—-: |:—-:|
| Trident |IE 系列|
| Gecko |firefox|
| Webkit |Safari,Android|
| blink |Chrome,Opera|

一般浏览器内核工作的流程如下图所示：
当浏览器就收到你的HTML文件和CSS文件时，触发过程是这样的.
内核运作

  • 首先Parse对文件进行解析
  • 然后将对应的HTML生成为DOM
  • CSS解析为CSS Object Model.
  • 然后两者合并进行render
  • 最后绘制到页面上

5. JS引擎怎么工作的？

实际上，JS引擎要比浏览器引擎高一级。

  1. 获得文件时，浏览器开始解析文档
  2. 解析到script标签时，则会暂停解析，将控制权给JS引擎
  3. 如果script引用的是外部资源，则会发起请求进行加载，然后执行
  4. 执行完毕后再将控制权还给渲染引擎，然后继续解析。

但，就是由于浏览器会将控制权交给JS引擎，所以如果你的加载的资源过长，网页就死在哪里，一动也不动，直到你加载好为止。所以，通用的做法就是将js文件放到body底部，保证DOM树的完整渲染。

但是，实事情况并不是这么简单，源于JS优化加载这一块，也是有很多优化的点的。

另外，我们还需要掌握一个小tip. 浏览器最多能同时下载几个文件呢？

答案是，不确定，通常来说是6个，而IE11则是13个。这里的文件，不仅仅指js和css而是指，一切通过请求发送的，都算一份文件。所以，通常的做法就是，合并脚本，CDN优化，资源分布防止。

6.什么是重流，重绘？

通常页面在加载你的js,css,img等文件时，引擎会对文件加以解析，最终生成两颗树，渲染树和DOM树. DOM树中的需要显示节点在渲染树中都会存在,但是display:none的则不会存在。 可以说，渲染树是指定DOM显示的真实节点，而DOM树则是页面显示的HTML结构。 在渲染树中，常常将节点成为帧或者盒子。这里，也可以理解为渲染树，其实就是css文件指定节点的样式表。

当渲染树和DOM树都已经完成的时候，则开始将页面显示到桌面上了。

这时候，如果你改变页面的DOM结构，浏览器则会重新改动涉及到的DOM. 此时你的渲染树和DOM树就会发生改变。

浏览器会重新计算出渲染树这一过程叫做重流(重排)。

将更新后的结构重新渲染到页面这一过程叫做重绘。

整个流程就是这个图
内核运作

7. XHTML 和 HTML 有什么区别？

XHTML

可扩展超文本标记语言 XHTML，是 HTML 4.01 的第一个修订版本，是「 3 种 HTML4 文件根据 XML1.0 标准重组」而成的。也就是说是， XHTML 是 HTML 4.01 和 XML1.0 的杂交。
由于 XHTML1.0 是基于 HTML4.01 的，并没有引入任何新标签或属性（XHTML 可以看作是 HTML 的一个子集），表现方式与超文本标记语言 HTML 类似，只是语法上更加严格，几乎所有的网页浏览器在正确解析 HTML 的同时，可兼容 XHTML。
　　如：XHTML 中所有的标签必须小写，所有标签必须闭合，每一个属性都必须使用引号包住。 <br> 要写成 <br />，不能写为 <BR />（同 hr）；使用了 <p> 之后必须有一 个</p> 以结束段落。

HTML与XML

　　HTML 是一种基于标准通用标记语言（SGML）的应用，而 XHTML 则基于可扩展标记语言（XML），HTML 和 XHTML 其实是平行发展的两个标准。本质上说，XHTML 是一个过渡技术，结合了部分 XML 的强大功能及大多数 HTML 的简单特性。建立 XHTML 的目的就是实现 HTML 向 XML 的过渡。

本文参考：
《HTML 5 移动 Web 开发实战详解》
深入浅出 HTML 与 XHTML 的区别
前端知识普及之 HTML
Web 开发面试题